import BaseChart from '@/components/echarts/BaseChart';
import type { EChartsOption } from 'echarts';
import { useEffect, useState } from 'react';
import http from '@/api/axios';
import { fontSizeRem } from '@/utils/fontSizeRem';

interface StoreTagsData {
  value: number;
  name: string;
}

const color = ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3']

const TagsChart = () => {

  const [tagsData, setTagsData] = useState<StoreTagsData[] | null>(null)

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await http.get('/api/stores/stats');
        setTagsData(res.data.data.tagsData)
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    }
    getData()
  }, [])


  // 图表配置
  const options: EChartsOption = {
    title: {
      text: '连锁类型划分',
      left: 'center',
      top: "3%",
      textStyle: {
        fontSize: fontSizeRem(14),
        fontWeight: 'bold',
        color: '#fff'
      }
    },
    color,
    legend: [
      {
        itemWidth: 12,
        itemHeight: 12,
        bottom: 0,
        textStyle: {
          color: '#fff',
          fontSize: fontSizeRem(10),
          rich: {
            name: { verticalAlign: 'middle' },
            value: { fontWeight: 600 }
          }
        },
        data: tagsData || []
      },

    ],
    tooltip: {
      trigger: "item",
      className: 'custom-tooltip',
      extraCssText: [
        'width: 120px;',
        'padding: 8px 12px;',
        'box-shadow: 0 4px 12px rgba(0,0,0,0.15);',
        'border-radius: 4px;'
      ].join(' '),
      formatter: (params: any) => {
        if (!params.data) return '';
        return `
          <div style="font-weight: 600; margin-bottom: 4px;">${params.name}</div>
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span style="display: flex; align-items: center;">
              <span style="
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: ${params.color};
                margin-right: 8px;
              "></span>
              数量
            </span>
            <span style="font-weight: 600;">${params.value}</span>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <span>占比</span>
            <span style="font-weight: 600;">${params.percent}%</span>
          </div>
        `;
      }
    },

    series: [{
      type: "pie",
      radius: ["40%", "65%"],  // 支持环形效果
      center: ["50%", "50%"],
      top: '5%',
      height: '80%',          // 显式设置绘图区域高度
      avoidLabelOverlap: true,  // 防止标签重叠
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'
      },
      label: {
        show: false // 关闭饼图标签
      },
      labelLine: {
        show: false
      },
      data: tagsData || []

    }]
  };

  return (
    <div style={{ width: "48%", height: '26vh' }}>
      <BaseChart option={options} />
    </div>
  );
};

export default TagsChart;